<template>
  <div class="binding_bg">
    <my-header backBtn>
      <div slot="title">
        书包定位
      </div>
      <div slot="right" @click="submit">
      	功能介绍
      </div>
    </my-header>
    <div>
      <div style="width: calc(100% - 10rem);margin: auto;margin-top: 3rem;">
        <img class="binding_top" src="@/../static/img/binding_top.png">
      </div>
      <div class="binding_text">
        <p>宝宝姓名：</p>
        <input v-model="modal.form.name" placeholder="请输入宝宝姓名"/>
      </div>
      <div class="binding_text">
        <p>书包编号：</p>
        <input v-model="modal.form.gpsCode" placeholder="请输入智能书包编号" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" />
      </div>
      <div>
        <div v-show="prompt.type" class="binding_bottom">
          <p>该书包编号已绑定{{prompt.name}}宝宝，请在此确认宝宝姓名及书包编号无误后，点击下方确认按钮完成绑定。</p>
        </div>
        <div>
          <button class="weui-btn" type="default" @click="subFormFn" style="width: 10rem;background: #36c12d;color: white;font-weight:400;margin-top: 20px;" >确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "registered",
    data() {
      return {
        prompt:{
          type:false,
          name:''
        },
        modal: {
          form: {
            studentId: '',
            gpsCode: '',
            name:''
          }
        },
      }
    },
    methods: {
      submit() {
      	this.$router.push({
      	  path:'/per-sug'
      	})
      },
      subFormFn() {
        let name = this.modal.form.name;
        let gpsCode = this.modal.form.gpsCode;
        if(!name || !gpsCode){
          this.$weui.topTips('请输入完整数据');
          return;
        }
        this.$http.fetchPersonalbinding({name:name,gpsCode:gpsCode}).then(res=>{
          let data = res.data;
          this.$toast.show('提交中...', 'loading');
          if(data.typecode===200){
            this.$toast.hide();
            this.$router.push("/per-bind");
          }else if(data.typecode===300){
            this.$toast.hide();
            this.prompt={
              type: true,
              name: data.name
            }
            this.$weui.topTips(data.news);
          }else if(data.typecode===400){
            this.$toast.hide();
            this.prompt.type = false;
            this.$weui.topTips(data.news);
          }

        });
        /*let code = this.modal.form.gpsCode;
        if (!code) {
          this.$weui.topTips('请输入编号');
          return;
        }
        this.$toast.show('提交中...', 'loading');
        this.$http.bindGps(this.modal.form).then(resp => {
          let data = resp.data;
          this.$toast.hide();
          if(data.typecode===300){
            this.prompt={
              type: true,
              name: data.username
            }
          }else if(data.typecode===200){
            this.modal.visible=false
            this.$router.go(0);
          }
        }).catch(resp => {
          this.$toast.hide();
        })*/
      }
    },
    created() {

    },
    mounted() {

    }
  }
</script>

<style scoped>
  .binding_bg{
    height: 100%;
    background:url(../../../static/img/binding_bg.png) no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
  }
  .binding_text{
    width: calc(100% - 2rem);
    line-height: 5.4rem;
    margin: 0 auto auto 1rem;
    padding: 0 1rem;
    height: 5rem;
  }
  .binding_text p{
    width: 10rem;
    height: 5rem;
    font-size: 1.3rem;
    float: left;
  }
  .binding_text input{
    height: 4rem;
    float: left;
    margin: 0.5rem auto;
    font-size: 1.4rem;
    width: calc(100% - 12rem);
    border: 1px solid #e6e6e6;
    border-radius:9px;
    padding-left: 10px;
    color: #101010;
  }
  .binding_top{
    max-height: 100%;
    max-width: 100%;
  }
  .binding_bottom{
    background:url(../../../static/img/binding_bottom.png) no-repeat;
    margin: auto;
    margin-top: 5px;
    width: calc(100% - 4rem);
    height: 12rem;
    background-size:100% 100%;
  }
  .binding_bottom p{
    color: red;
    padding-top: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.4rem;
  }
</style>
